<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购买服务</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<script src="../js/mui.js"></script>
		<script src="../js/mui.view.js"></script>
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/feedback-page.css" />	
		<link rel="stylesheet" href="../css/MUIxinyingCss.css"/>
		<link rel="stylesheet" href="../css/iconfont.css"/>
		<style>
			html,body{background-color:#F5F5F5}.mui-views,.mui-view,.mui-pages,.mui-page,.mui-page-content{position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%;background-color:#F5F5F5}.mui-pages{top:44px;height:auto}.mui-scroll-wrapper,.mui-scroll{background-color:#f5f5f5}.mui-page.mui-transitioning{-webkit-transition:-webkit-transform 300ms ease;transition:transform 300ms ease}.mui-page-left{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mui-ios .mui-page-left{-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0)}.mui-navbar{position:fixed;right:0;left:0;z-index:10;height:44px;background-color:#f7f7f8}.mui-navbar .mui-bar{position:absolute;background:transparent;text-align:center}.mui-android .mui-navbar-inner.mui-navbar-left{opacity:0}.mui-ios .mui-navbar-left .mui-left,.mui-ios .mui-navbar-left .mui-center,.mui-ios .mui-navbar-left .mui-right{opacity:0}.mui-navbar .mui-btn-nav{-webkit-transition:none;transition:none;-webkit-transition-duration:.0s;transition-duration:.0s}.mui-navbar .mui-bar .mui-title{display:inline-block;width:auto}.mui-page-shadow{position:absolute;right:100%;top:0;width:16px;height:100%;z-index:-1;content:''}.mui-page-shadow{background:-webkit-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 10%,rgba(0,0,0,.01) 50%,rgba(0,0,0,.2) 100%);background:linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 10%,rgba(0,0,0,.01) 50%,rgba(0,0,0,.2) 100%)}.mui-navbar-inner.mui-transitioning,.mui-navbar-inner .mui-transitioning{-webkit-transition:opacity 300ms ease,-webkit-transform 300ms ease;transition:opacity 300ms ease,transform 300ms ease}.mui-page{display:none}.mui-pages .mui-page{display:block}.mui-page .mui-table-view:first-child{margin-top:15px}.mui-page .mui-table-view:last-child{margin-bottom:30px}.mui-table-view{margin-top:20px}.mui-table-view span.mui-pull-right{color:#999}.mui-table-view-divider{background-color:#F5F5F5;font-size:14px}.mui-table-view-divider:before,.mui-table-view-divider:after{height:0}.head{height:40px}#head{line-height:40px}.head-img{width:40px;height:40px}#head-img1{position:absolute;bottom:10px;right:40px;width:40px;height:40px}.update{font-style:normal;color:#999;margin-right:-25px;font-size:15px}.mui-fullscreen{position:fixed;z-index:20;background-color:#000}.mui-ios .mui-navbar .mui-bar .mui-title{position:static}
		</style>
		<link rel="stylesheet" type="text/css" href="../css/feedback-page.css" />
	</head>
	<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="payApp" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="line" class="mui-page">
			
			<!--页面标题栏开始-->
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<h1 class="mui-center mui-title">购买服务</h1>
			</div>
			<!--页面标题栏结束-->
			
			<!--页面主内容区开始-->
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="service_box">
							<div class="message_con margin">
						        <div class="active clear no_border">图文咨询<span>王秋兰医生 妇科</span></div>
						    </div>
							<div class="zffs">
						        	<p class="active">使用问诊卷<span>(每张总论卷可以为您抵扣十元)</span></p>
						    </div>
						    <div class="need_pay active">
						        <div class="message_con for_right">
						            <p><a href="#count" class="clear">请选择问卷数量：<span id="count_a">5</span></a></p>
						        </div>
						        <div class="message_con margin1">
						            <div class="active clear">共需支付<span class="count">￥<big>35</big>元</span></div>
						        </div>
						    </div>
						    <h1 class="pay_style">请选择支付方式</h1>
						    <ul class="mui-table-view mui-table-view-radio shopping">
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">微信</a>
								</li>
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">支付宝</a>
								</li>
							</ul>
							
							<div class="now_pay"><a href="##img_servie_form" class="mui-btn mui-btn-block ">立即购买</a></div>
							
						</div>
					</div>
				</div>
			</div>
			<!--页面主内容区结束-->
		</div>
		<!--单页面结束-->
		<script type="text/javascript">
			//初始化单页view
			var viewApi = mui('#payApp').view({
				defaultPage: '#line'
			});
		</script>
		<!--图文咨询表格-->
		<!--<div id="img_servie_form" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">免费咨询表格</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							 <li class="mui-table-view-cell"><span>患者姓名：</span><input type="text" required="true" class="mui-input-clear" placeholder="张散"></li>
					         <li class="mui-table-view-cell"><span>职业：</span><input type="text" required="true" class="mui-input-clear" placeholder="销售员"></li>
					         <li class="mui-table-view-cell"><span>首次生育年龄：</span><input type="text" required="true" class="mui-input-clear" placeholder="24岁"></li>
					         <li class="mui-table-view-cell forward_right"><span>婚姻：</span><a href="#marriage" id="marriage_a" class="mui-navigate-right">未婚</a></li>
					         <li class="mui-table-view-cell"><span>月经史：</span><input type="text" required="true" class="mui-input-clear" placeholder="月经史"></li>
					         <li class="mui-table-view-cell"><span>既往病史：</span><input type="text" required="true" class="mui-input-clear" placeholder="既往病史"></li>
					         <li class="mui-table-view-cell"><span>家族史：</span><input type="text" required="true" class="mui-input-clear" placeholder="家族史"></li>
					         <li class="mui-table-view-cell"><span>个人史：</span><input type="text" required="true" class="mui-input-clear" placeholder="个人史"></li>
					         <li class="mui-table-view-cell forward_right"><span>主要症状：</span><a href="#symptom" id="symptom_a" class="mui-navigate-right">不孕不育</a></li>
						</ul>
						<div class="row mui-input-row illness">
							<h2>主要病情描述：</h2>
							<textarea id="question" class="mui-input-clear question" placeholder="请详细描述你的病情..."></textarea>
						</div>
						<div class="login_btn">
						        <a href="#img_free_dialogue">保存并上传图片</a>
					   </div>
						
					</div>
				</div>
			</div>
		</div>
		<!--图文咨询选择图片-->
		<!--<div id="img_free_dialogue" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">图文咨询选择图片</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="imgs_li">
							<li>
						    	<h1><time pubdate="2015-01-02">2015-01-02</time></h1>
						        <div class="this_img">
						        	<img src="../images/this_img.png" alt="img">
						            <span><img src="../images/chick_img.png" alt="chick"></span>
						        </div>
						        <div class="this_img">
						        	<img src="../images/this_img.png" alt="img">
						            <span><img src="../images/chick_img.png" alt="chick"></span>
						        </div>
						        <div class="this_img">
						        	<img src="../images/this_img.png" alt="img">
						            <span><img src="../images/chick_img.png" alt="chick"></span>
						        </div>
						        <div class="this_img active">
						        	<img src="../images/this_img.png" alt="img">
						            <span><img src="../images/chick_img.png" alt="chick"></span>
						        </div>
						    </li>
						</ul> 
					</div>
					<div class="pass_btn clear">
						<a href="##" class="mui-btn mui-btn-success mui-pull-left">取消</a>
						<a href="#edit_img" class="mui-btn mui-btn-warning mui-pull-right">确认</a>
					</div>
				</div>
			</div>
		</div>
		<!--图文咨询编辑图片-->
		<!--<div id="edit_img" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">编辑图片</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="the_edit_img">
							<img src="../images/this_img.png" alt="this">
						   <div class="action_img">
						   		<h1>图片备注</h1>
						        <textarea id="textarea" rows="5" placeholder="对照片进行简单注释"></textarea>       	 
						        </textarea>
						       <div class="pass_btn clear">
						            <a href="#img_free_dialogue" class="mui-btn mui-btn-success mui-pull-left">上传并选择下一张</a>
						            <a href="#browse_report" class="mui-btn mui-btn-primary mui-pull-right">上传已完成的照片</a>
						        </div>
						   </div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--图文咨询浏览报告-->
		<!--<div id="browse_report" class="mui-page feedback">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">浏览报告</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							 <li class="mui-table-view-cell"><span>患者姓名：</span><input type="text" required="true" class="mui-input-clear" placeholder="张散" readonly="true"></li>
					         <li class="mui-table-view-cell"><span>职业：</span><input type="text" required="true" class="mui-input-clear" placeholder="销售员" readonly="true"></li>
					         <li class="mui-table-view-cell"><span>首次生育年龄：</span><input type="text" required="true" class="mui-input-clear" placeholder="24岁" readonly="true"></li>
					         <li class="mui-table-view-cell forward_right"><span>婚姻：</span><a href="##">未婚</a></li>
					         <li class="mui-table-view-cell"><span>月经史：</span><input type="text" required="true" class="mui-input-clear" placeholder="月经史" readonly="true"></li>
					         <li class="mui-table-view-cell"><span>既往病史：</span><input type="text" required="true" class="mui-input-clear" placeholder="既往病史" readonly="true"></li>
					         <li class="mui-table-view-cell"><span>家族史：</span><input type="text" required="true" class="mui-input-clear" placeholder="家族史" readonly="true"></li>
					         <li class="mui-table-view-cell"><span>个人史：</span><input type="text" required="true" class="mui-input-clear" placeholder="个人史" readonly="true"></li>
					         <li class="mui-table-view-cell forward_right"><span>主要症状：</span><a href="##">不孕不育</a></li>
						</ul>
						<div class="row mui-input-row illness">
							<h2>主要病情描述：</h2>
							<textarea id="question" class="mui-input-clear question_detail" placeholder="这里描述病情的详细信息..."></textarea>
						</div>
						<div class="screenshot">
							<h2>医疗设备截图</h2>
							<div id='image-list' class="row image-list">
							</div>
						</div>
						<div class="send_report">
							<a href="#picture_consulting_dialog" class="mui-btn mui-btn-block">保存并发送</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--图文咨询对话框-->
		<!--<div id="picture_consulting_dialog" class="mui-page feedback">
			<div class="mui-navbar-inner mui-bar mui-bar-nav header_bar">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">图文咨询对话</h1>
				<button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right evaluate_btn" id="pic_evaluate">评分</button>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<article>
						   	<div class="kt_lxkf_dialog">
						    	<h1 class="kt_lxkf_dialog_time">您正在回答张靓女士的免费咨询问题<span></span></h1>
						        <div class="kt_lxkf_dialog_her">
						        	<div class="lxkf_dialog_img">
						            	<img src="../images/kefu-01@2x.png" alt="her">
						            </div>
						            <div class="lxkf_dialog_text">
						            	<i class="before"><img src="../images/sanjiao.png" alt="snajiao"></i>
						            	<p>亲爱的的用户朋友，有什么而要帮助您的吗？</p>
						            </div>
						        </div>
						        <div class="kt_lxkf_dialog_me">
						        	<div class="lxkf_dialog_img">
						            	<img src="../images/kefu-01@2x.png" alt="her">
						            </div>
						            <div class="lxkf_dialog_text">
						            	<i class="before"><img src="../images/sanjiao_right.png" alt="snajiao_right"></i>
						            	<p>是这样的，我的订单无法显示，请问是什么原因？</p>
						            </div>
						        </div>
						    </div>
						</article>
						
					</div>
				</div>
				<div class="dialog_input">
				    <span class="text_input mui-input-speech">
				    	<a href="##" class="sound_ico iconfont icon-yuyin"></a>
				    	<a href="##" class="add_img_ico iconfont icon-tupian"></a>
				    	<textarea rows="1" placeholder="对话"></textarea>
				    	<a href="##" class="mui-btn img_dialog_send">发送</a>
				    </span>
				</div>
			</div>
		</div>-->
	<div id="count" class="mui-popover mui-popover-action mui-popover-bottom">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<a href="##">1</a>
			</li>
			<li class="mui-table-view-cell">
				<a href="##">2</a>
			</li>
			<li class="mui-table-view-cell">
				<a href="##">3</a>
			</li>
		</ul>
	</div>
	<!--<div id="marriage" class="mui-popover mui-popover-action mui-popover-bottom">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<a href="##">已婚</a>
			</li>
			<li class="mui-table-view-cell">
				<a href="##">未婚</a>
			</li>
			<li class="mui-table-view-cell">
				<a href="##">保密</a>
			</li>
		</ul>
	</div>
	<div id="symptom" class="mui-popover mui-popover-action mui-popover-bottom">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<a href="##">不孕不育1</a>
			</li>
			<li class="mui-table-view-cell">
				<a href="##">不孕不育2</a>
			</li>
			<li class="mui-table-view-cell">
				<a href="##">不孕不育3</a>
			</li>
		</ul>
	</div>
	<div id="edit_marriage" class="mui-popover mui-popover-action mui-popover-bottom">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<a href="##">不婚</a>
			</li>
			<li class="mui-table-view-cell">
				<a href="##">未婚</a>
			</li>
			<li class="mui-table-view-cell">
				<a href="##">保密</a>
			</li>
		</ul>
	</div>
	<div id="edit_symptom" class="mui-popover mui-popover-action mui-popover-bottom">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<a href="##">无症状</a>
			</li>
			<li class="mui-table-view-cell">
				<a href="##">不孕不育2</a>
			</li>
			<li class="mui-table-view-cell">
				<a href="##">不孕不育3</a>
			</li>
		</ul>
	</div>-->
	<script src="../js/feedback-page.js"></script>
	<script src="../js/mui.min.js "></script>
	<script src="../js/mui.view.js "></script>
	<script src='../js/jquery-1.11.1.js'></script>
	<script src='../js/strophe-custom-2.0.0.js'></script>
	<script src='../js/json2.js'></script>
	<script src="../js/easemob.im-1.0.5.js"></script>
	<script src='../js/feedback.js'></script>
	<script src="../js/feedback-page.js"></script>
</body>
	<script>
		mui.init();
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
			//		点击右上角评分
//		document.getElementById("pic_evaluate").addEventListener('tap', function() {
//				var div_box ='<div class="score_box">';
//					div_box +='<div class="score_in_box">';
//					div_box +='<span class="score_name">服务态度</span>';
//					div_box +='<span class="score_star"><img src="../images/star.png" alt="star"></span>';
//					div_box +='<span class="score_star"><img src="../images/star.png" alt="star"></span>';
//					div_box +='<span class="score_star"><img src="../images/star.png" alt="star"></span>';
//					div_box +='<span class="score_star"><img src="../images/star.png" alt="star"></span>';
//					div_box +='<span class="score_star"><img src="../images/star.png" alt="star"></span>';
//					div_box +='<span class="score">0</span>';
//					div_box +='</div>';
//					div_box +='<div class="score_in_box">';
//					div_box +='<span class="score_name">回复速度</span>';
//					div_box +='<span class="score_star"><img src="../images/star.png" alt="star"></span>';
//					div_box +='<span class="score_star"><img src="../images/star.png" alt="star"></span>';
//					div_box +='<span class="score_star"><img src="../images/star.png" alt="star"></span>';
//					div_box +='<span class="score_star"><img src="../images/star.png" alt="star"></span>';
//					div_box +='<span class="score_star"><img src="../images/star.png" alt="star"></span>';
//					div_box +='<span class="score">0</span>';
//					div_box +='</div>';
//					div_box +='<div class="score_in_box">';
//					div_box +='<span class="score_name">专业技能</span>';
//					div_box +='<span class="score_star"><img src="../images/star.png" alt="star"></span>';
//					div_box +='<span class="score_star"><img src="../images/star.png" alt="star"></span>';
//					div_box +='<span class="score_star"><img src="../images/star.png" alt="star"></span>';
//					div_box +='<span class="score_star"><img src="../images/star.png" alt="star"></span>';
//					div_box +='<span class="score_star"><img src="../images/star.png" alt="star"></span>';
//					div_box +='<span class="score">0</span>';
//					div_box +='</div>';
//					div_box +='</div>';
//					div_box +='</div>';
//					var btnArray = ['取消','确认'];
//					mui.confirm(div_box, '<h1>请对王秋兰医生进行评价</h1>', btnArray, function(e) {
//						if (e.index == 1) {
//							var scoreN='';
//							var score_name=document.querySelectorAll(".score_box .score_name");
//							for(var i=0;i<score_name.length;i++){
//								scoreN+=score_name[i].innerHTML+"分:"+score_name[i].parentNode.querySelector(".score").innerHTML;
//								
//							};
//							alert(scoreN);
//							div_box="";
//						} else {
//							alert("你点击了取消");
//							div_box="";
//						}
//					});
//				mui(".score_in_box").on("tap",".score_star",selectCore);
//			});
			//选择评分
//			function selectCore(){
//					var index=null;
//					var score_star=this.parentNode.querySelectorAll(".score_star");
//					var star_length=score_star.length;
//					for(var i=0;i<star_length;i++){
//						if(score_star[i]==this){
//							index=i+1;
//						};
//					};
//					this.parentNode.querySelector(".score").innerHTML=index;
//					for(i=0;i<index;i++){
//						score_star[i].querySelector("img").src="../images/star_full.png";
//						};
//					for(i=index;i<star_length;i++){
//						score_star[i].querySelector("img").src="../images/star.png";
//						};
//			};
		//选择数量
			mui('body').on('tap', '.mui-popover-action li>a', function() {
			var a = this,
				parent;
			//根据点击按钮，反推当前是哪个菜单
			for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
				if(parent.id){
					switch(parent.id){
					case "edit_marriage":
					document.querySelector("#edit_marriage_a").innerHTML =a.innerHTML;
					break;
					case "edit_symptom":
					document.querySelector("#edit_symptom_a").innerHTML =a.innerHTML;
					break;
					case "marriage":
					document.querySelector("#marriage_a").innerHTML =a.innerHTML;
					break;
					case "symptom":
					document.querySelector("#symptom_a").innerHTML =a.innerHTML;
					break;
					case "count":
					document.querySelector("#count_a").innerHTML =a.innerHTML;
					break;
					default:
					break
					}; 
					//关闭菜单
					mui('#' + parent.id).popover('toggle');
				};
			}
			
		});
		document.querySelector(".zffs>p").addEventListener("tap",function(){
			if(this.className.indexOf("active")<0){
				this.className="active";
				document.querySelector(".need_pay").className=document.querySelector(".need_pay").className+" active";
			}else{
				this.className="";
				document.querySelector(".need_pay").className=document.querySelector(".need_pay").className.replace(/ active/g,"");
			};
		});
//		
//		document.querySelector(".now_pay>a").addEventListener("tap",function(e){
//			var _this=this;
//			var href=this.href;
//			var cf=confirm("数据保存好了吗？");
//			if(!cf){
//				this.href="";
//				setTimeout(function(){
//				_this.href=href;
//			},500);
//			};
//			
//		});

		//选择图片
//		$(".imgs_li").on("tap",".this_img",function(){
//			var this_img=$(".this_img");
//			for(var i=0;i<this_img.length;i++){
//				this_img[i].className=this_img[i].className.replace(/ active/g,"");
//			};
//			this.className+=" active";
//		});
			
		})(mui);
	</script>

</html>